import Vue from 'vue'
import VueRouter from 'vue-router'

import HeaderBar from "@/layout/HeaderBar.vue"
import FooterBar from "@/layout/FooterBar.vue"

// 引入单文件组件
import HomeView from '../views/Home'
import ListView from '../views/List'
import DetailView from '../views/Detail'
import DetailCopyView from '../views/Detail/indexCopy.vue'
import CarView from '../views/Car'
import LoginView from '../views/Login'
import MineView from '../views/Mine'




// Vue.use()  可以在Vue中导入插件 (vue-router官方定义的插件)
Vue.use(VueRouter);   // 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)


// 项目主页  
// 以前项目主页: http://localhost:8080/#/  => 推广出去   http://laowang.com/#/ 
// 项目维护后: http://localhost:8080/#/home  => 推广出去 http://laowang.com/#/home

// 解决方法1: 
// 让访问以前地址的人  => 统一跳转 /home


// 路由配置    

const routes = [

	// 重定向 => 在路由配置中的跳转操作
	// 重定向  => 访问/ 自动跳转/home
	// {
	//   path: '/',
	//   redirect:"/home" 
	// },

	// 别名:  访问 /  /home  都渲染HomeView视图
	{
		path: '/home',
		alias: "/",   // 别名
		name: 'home',        // 命名路由

		// 我们在每个路由配置中定义一个meta属性,  属性值是一个对象 => 可以在该对象中存储一些用户自定义的数据
		meta:{
			label:"首页",
		},
		// component: HomeView,  // 默认将视图HomeView 渲染到 name="default" 的router-view中
		components: {
			header: HeaderBar,
			default: HomeView,
			footer: FooterBar,
		}

	},
	{
		path: '/list',
		name: 'list',
		meta:{
			label:"列表",
			showBack:true,
		},
		// component: ListView,  // 普通引入 -> 根组件挂载时直接引入 
		components: {
			header: HeaderBar,
			default: ListView,
			footer: FooterBar,
		}
	},
	{
		// 动态路径参数(params)   => 以冒号开头
		// path => /detail/:proid  (此时proid不是作为路由 -> 而是路径参数 -> 对应路径接收数据)
		// url  => /detail/100 
		// 页面中的所有组件均可以通过 this.$route.params => {proid:100} 访问
		// 一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params

		path: '/detail/:proid',
		name: 'detail',
		meta:{
			label:"详情页",
			showBack:true,
		},
		// component: DetailView,  // 普通引入 -> 根组件挂载时直接引入
		components: {
			header: HeaderBar,
			default: DetailView,
		},
		// 路由独享守卫 -> 只针对特定路由跳转生效 (当从其他路由跳转值详情页时才会生效)
		// beforeEnter: (to, from, next) => {
		// 	console.log("准备跳转详情页");
		// 	console.log("to",to);
		// 	console.log("from",from);
		// 	next();
		// }
	},
	{
		path: '/detailcopy',
		name: 'detailcopy',
		component: DetailCopyView,  // 普通引入 -> 根组件挂载时直接引入 
	},
	{
		path: '/car',
		name: 'car',
		meta:{
			label:"购物车",
			showBack:true,
		},
		// component:CarView,  // 普通引入 -> 根组件挂载时直接引入 
		components: {
			header: HeaderBar,
			default: CarView,
			footer: FooterBar,
		}
	},
	{
		path: '/login',
		name: 'login',
		meta:{
			label:"登录",
			showBack:true,
		},
		// component:LoginView,  // 普通引入 -> 根组件挂载时直接引入 
		components: {
			header: HeaderBar,
			default: LoginView,
		}
	},
	{
		path: '/mine',
		// name: 'mine',
		// component:MineView,  // 普通引入 -> 根组件挂载时直接引入 
		components: {
			header: HeaderBar,
			default: MineView,
		},
		// 配置当前路由的子路由  /mine/xxx
		children: [
			// 如果路径为"" => 等价于访问 /mine => 默认展示 Order   
			{
				path: "",
				name: "mine",
				meta:{
					label:"我的",
					showBack:true,
				},
				component: () => import("@/views/Mine/Order")
			},
			// 如果路由以"/"开头  => 默认路径从根路由开始匹配 /mine/order
			{
				path: "/mine/order",
				name: "order",
				meta:{
					label:"我的",
					showBack:true,
				},
				component: () => import("@/views/Mine/Order")
			},
			// 如果路由没有以"/"开头  => 默认当前路由下的子路由  => /mine/coll
			{
				path: "coll",
				name: "coll",
				meta:{
					label:"我的",
					showBack:true,
				},
				component: () => import("@/views/Mine/Collection")
			}
		],
	},
	// { 
	//   // 如果是未配置的路由地址  => 统一展示 NotFound 视图 (缺点: 路径还是错误的路由地址)
	//   // 如果想匹配任意路径，我们可以使用通配符 (*)
	//   // 当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分：
	//   path:"*",
	//   name:"notfound",
	//   component:() => import(/* webpackChunkName: "about" */ '@/views/NotFound'),
	// },

	{
		path: "/404",
		name: "notfound",
		component: () => import(/* webpackChunkName: "about" */ '@/views/NotFound'),
	},
	{
		// 如果是未配置的路由地址  => 统一跳转 404
		path: "*",
		// redirect:"/404",   // 选项值是字符串 => 默认基于path路径跳转
		// redirect:{name:"notfound",query:{a:1,b:2}},   // 选项值是对象时 =>可以基于path路径或name跳转 (可以带数据,只能是死数据)
		redirect: (from) => {

			// 当输入错误路由路径时 -> 默认准备跳转错误地址 => 没有匹配到 -> 跳转 /404
			// form 可以理解为 从哪个路由地址跳转/404

			console.log(from);
			return { name: "notfound", query: { wd: from.params.pathMatch } }
		}
	},
]

// 根据路由配置生成 路由实例
const router = new VueRouter({
	mode: 'hash', // 路由模式  => hash/history
	base: process.env.BASE_URL,
	routes
})


// 全局路由守卫 => 都依赖于路由实例router绑定
// 全局前置守卫  => 每次导航切换都会执行(路由跳转之前执行)
//    to    即将要进入的目标路由对象(要跳转的页面的路由信息)
//    from  当前导航正要离开的路由 (跳转前的当前路由信息)
//    next  函数
//        next()       进入管道中的下一个钩子(回调函数) -> 如果配置了多个全局前置守卫 -> 如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
//        next(false)  中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
//        next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你
//        next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
//       确保 next 函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错

// 全局解析守卫  用法同router.beforeEach (只是触发的顺序靠后)
// router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

// 全局后置钩子 全局后置钩子
// 你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：
// 可以理解为已经确定导航要跳转了  => 可以做一些前端埋点 (统计用户 访问次数  页面访问次数 驻留时间)

// router.beforeEach(function(to,from,next){
// 	console.log(1111);
// 	console.log("to",to);
// 	console.log("from",from);
// 	next();
// })

// let isLogin = function(){
// 	return new Promise(function(resolve){
// 		setTimeout(()=>{
// 			resolve(true);
// 		},1000)
// 	})
// }

// router.beforeEach(async function(to,from,next){
// 	console.log(2222);

// 	if(to.path=="/home"||to.path=="/"||to.path=="/login"||to.path=="/list"||to.path=="/404"){
// 		next();
// 	}else{
// 		var flag = await isLogin();
// 		if(flag){
// 			next()
// 		}else{
// 			next({name:'login',query:{ReturnUrl:to.fullPath}})
// 		}
// 	}
// })

// var whiteList = ["/","/home","/login","/list","/404"];
// router.beforeEach(async function(to,from,next){
// 	console.log(2222);

// 	if(whiteList.includes(to.path)){
// 		next();
// 	}else{
// 		var flag = await isLogin();
// 		if(flag){
// 			next()
// 		}else{
// 			next({name:'login',query:{ReturnUrl:to.fullPath}})
// 		}
// 	}
// })


// var whiteList = ["/","/home","/login","/list","/404"];
// router.beforeResolve(async function(to,from,next){
// 	console.log(2222);

// 	if(whiteList.includes(to.path)){
// 		next();
// 	}else{
// 		var flag = await isLogin();
// 		if(flag){
// 			next()
// 		}else{
// 			next({name:'login',query:{ReturnUrl:to.fullPath}})
// 		}
// 	}
// })


// 数据库   => 访客数 

// router.afterEach(function(to,from){
// 	console.log(33333,"进行埋点操作:访客数++");
// 	console.log("to",to);
// 	console.log("from",from);
// })








// 导出路由实例
export default router 







